<template>
  <div style="height: 100%">
    <div class="list-box">
      <div
        @click="changeType(-1)"
        :class="typeIndex == -1 ? 'child child-active' : 'child'"
      >
        <div class="large">
          {{ categoryListParam.ishuozhuorfenlei == 1 ? "全部分类" : "全部货主" }}
        </div>
        <img
          @click.stop="changeListType"
          src="../assets/img/switch.png"
          class="icon"
          alt=""
        />
      </div>
      <div class="list" v-show="categoryListParam.ishuozhuorfenlei == 1">
        <div
          @click="changeType(index)"
          :class="typeIndex == index ? 'child child-active' : 'child'"
          v-for="(item, index) in categoryListData.data"
          :key="index"
        >
          <div class="title" style="line-height: 44px">{{ item.name }}</div>
          <!-- <div class="desc">{{ item.sort_order }}</div> -->
        </div>
      </div>
      <div class="list" v-show="categoryListParam.ishuozhuorfenlei == 2">
        <div
          @click="changeType(index)"
          :class="typeIndex == index ? 'child child-active' : 'child'"
          v-for="(item, index) in categoryListData.data"
          :key="index"
        >
          <div class="title">{{ item.name }}</div>
          <div class="desc">{{ item.pici }}</div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div @keydown="keyDown($event)" class="input">
        <div @click.stop="goodLarge = !goodLarge" class="icon">切换</div>
        <input
          v-model="goodsListParam.key"
          placeholder="搜索商品名称/拼音码"
          type="text"
        />
        <img class="img" src="../assets/img/search.png" alt="" />
      </div>
      <div v-if="!goodLarge" class="good-list">
        <div
          @click="chooseGood(index, item)"
          :style="goodIndex == index ? 'border: 1px solid #2a9128' : ''"
          class="good"
          v-for="(item, index) in goodsListData.data"
          :key="item"
        >
          <div class="g-img">
            <!-- {{ item.goods_name }} -->
            <img :src="item.original_img" alt="" />
          </div>
          <div class="g-title">{{ item?.goods_name??'' }}</div>
          <div v-if="item.pici" style="text-align: left; width: 100%">
            <div class="g-desc" v-if="item.pici.huozhu_name">
              {{ item.pici.huozhu_name }}{{ item.pici.pici }}
            </div>
          </div>
          <div style="text-align: left; clear: both">
            <div class="g-unit">1{{ item.sell_type }}={{ item.sell_weight }}斤</div>
            <!-- <div class="g-unit">{{ item.store_count_str }}</div> -->
          </div>
        </div>
      </div>
      <div v-else class="good-list">
        <div
          @click="chooseGood(index, item)"
          :style="goodIndex == index ? 'border: 1px solid #2a9128;' : ''"
          class="good-small"
          v-for="(item, index) in goodsListData.data"
          :key="index"
        >
          <img class="g-img" :src="item.original_img" alt="" />
          <div class="_g-title1 singe-line">{{ item?.goods_name??'' }}</div>
          <div v-if="item.pici" class="singe-line txt-row">
            <div class="_g_desc" v-if="item.pici.huozhu_name">
              {{ item.pici.huozhu_name }}{{ item.pici.pici }}
            </div>
          </div>
          <div class="singe-line txt-row">
            <!-- <div class="_g-unit">1件=9框</div> -->
            <div class="_g-unit2">1{{ item.sell_type }}={{ item.sell_weight }}斤</div>
          </div>
          <div class="_g-title">存：{{ item.store_count_dot }}</div>
        </div>
      </div>
    </div>
    <div class="lat">
      <div @click="searchGood(item)" v-for="item in letterList" :key="item">
        {{ item }}
      </div>
    </div>
    <div v-if="goodIndex >= 0" class="money-box">
      <img @click="chooseGood(-1, '')" class="s-btn" src="../assets/img/bb.png" alt="" />
      <!-- 开单 -->
      <div v-show="goodIndex >= 0">
        <div class="txt singe-line">为{{ goodData?.goods_name??'' }}开单</div>
        <!-- <div v-if="goodData.goodsGuige.length > 0" class="t-group">
          <div
            @click="buyUnitIndex = 1"
            :class="buyUnitIndex == 1 ? 'tg-btn tg-active' : 'tg-btn'"
          >
            按{{ goodData.unit }}卖
          </div>
          <div
            v-for="item in goodData.goodsGuige"
            :key="item.unit"
            @click="buyUnitIndex = 2"
            :class="buyUnitIndex == 2 ? 'tg-btn tg-active' : 'tg-btn'"
          >
            按{{ item.unit }}
          </div>
        </div> -->
        <div class="t-group">
          <div
            @click="buyUnitItem = goodData.unit"
            :class="buyUnitItem == goodData.unit ? 'tg-btn tg-active' : 'tg-btn'"
          >
            按{{ goodData.unit }}卖
          </div>
          <div
            v-for="item in goodData.goodsGuige"
            :key="item.unit"
            @click="buyUnitItem = item.unit"
            :class="buyUnitItem == item.unit ? 'tg-btn tg-active' : 'tg-btn'"
          >
            按{{ item.unit }}
          </div>
        </div>
        <div class="inp-box">
          <div @click="chooseInp(0)" :class="inpIndex == 0 ? 'inp1 inp1-active' : 'inp1'">
            <input
              v-model="num"
              type="text"
              :readonly="readonly"
              autocomplete="off"
              @input="numChange"
              autofocus
              id="num-inp0"
              placeholder="请输入数量"
              class="input"
            />
            <!-- <div class="unit">件/元</div> -->
            <!-- <div v-if="!isShowCalcData(num)" class="unit">{{ num }}件</div> -->
            <!-- <div v-if="!isShowCalcData(num) && isHave(num)" class="unit">
              {{ numField }}件
            </div> -->
            <div v-if="!isShowCalcData(num) && isHave(num)" class="unit">
              {{ numField }}{{ goodData.unit }}
            </div>
            <div v-if="isShowCalcData(num)" class="unit">{{ numField }}{{ goodData.unit }}</div>
            <div v-if="!isShowCalcData(num) && !isHave(num)" class="unit">{{ goodData.unit }}</div>
          </div>
          <!-- <div @click="chooseInp(2)" :class="inpIndex == 2 ? 'inp1 inp1-active' : 'inp1'">
            <input
              id="num-inp1"
              type="text"
              autocomplete="off"
              :readonly="readonly"
              v-model="weight"
              @input="weightChange"
              placeholder="请输入重量"
              class="input"
            />
            <div v-if="!isShowCalcData(weight) && isHave(weight)" class="unit">{{ weightField }}公斤</div>
            <div v-if="isShowCalcData(weight)" class="unit">{{ weightField }}公斤</div>
            <div v-if="!unit" class="unit">元</div>
          </div> -->
          <div @click="chooseInp(1)" :class="inpIndex == 1 ? 'inp1 inp1-active' : 'inp1'">
            <input
              id="num-inp1"
              type="text"
              autocomplete="off"
              :readonly="readonly"
              v-model="unit"
              @input="unitChange"
              placeholder="请输入单价"
              class="input"
            />
            <!-- <div class="unit">{{unitField}}元</div> -->
            <div v-if="!isShowCalcData(unit) && isHave(unit)" class="unit">
              {{ unitField }}元
            </div>
            <div v-if="isShowCalcData(unit)" class="unit">{{ unitField }}元</div>
            <div v-if="!isShowCalcData(unit) && !isHave(unit)" class="unit">元</div>
          </div>
          <div
            @click="importPeople = true"
            :class="inpIndex == 3 ? 'inp1 inp1-active' : 'inp1'"
          >
            <!-- <input placeholder="临时买家" class="input" type="text"> -->
            <div class="input" style="color: #6ab269">{{ !maijiaId ? '临时买家' : findMj() }}</div>
            <div class="inp1-icon-box">
              <img class="inp1-icon" src="../assets/img/import.png" alt="" />
              <div class="inp1-txt">导入</div>
            </div>
          </div>
          <div v-if="goodData.goodsFujiafei.length > 0" :class="inpIndex == 4 ? 'inp1 inp1-active' : 'inp1'">
            <!-- <div class="input">
              力资：{{ lzPrice }} <span style="color: #6ab269; float: right">元/件</span>
            </div> -->
            <div class="input">
              力资：
              <input
                v-model="lzPrice"
                style="display: inline-block; width: 50px; margin-left: 30px"
                type="number"
                class="input"
              />
              <span style="color: #6ab269; float: right">元/件</span>
            </div>
            <div :style="lzType == 'sub' ? 'background: red' : ''" @click="changeLzType" class="inp1-icon-box2">
              <img src="../assets/img/people.png" alt="" />
              {{ lzType == "add" ? "买家出" : "货主出" }}
            </div>
            <div class="price">
              {{ lzTotalPrice }}
              <span>元</span>
            </div>
          </div>
          <div v-if="goodData.goodsFujiafei.length > 0" :class="inpIndex == 5 ? 'inp1 inp1-active' : 'inp1'">
            <div class="input">
              开票：{{ ticketPrice }} <span style="color: #6ab269; float: right">元</span>
            </div>
            <div :style="ticketType == 'sub' ? 'background: red;' : ''" @click="changeTicketType" class="inp1-icon-box2">
              <img src="../assets/img/people.png" alt="" />
              {{ ticketType == "add" ? "买家出" : "货主出" }}
            </div>
            <div class="price">
              {{ ticketTotalPrice }}
              <span>元</span>
            </div>
          </div>
        </div>
        <div class="null"></div>
        <div class="keyboard-box">
          <div class="k-txt">
            <div class="k-txt1">全部历史：</div>
            <div
              v-for="item in historyPriceData.allPrice"
              :key="item"
              class="k-txt2"
              @click="setPrice(item)"
            >
              {{ item }}
            </div>
            <div class="k-txt4">
              货款：<span>{{ goodPrice }}</span
              >元
            </div>
          </div>
          <div class="k-txt">
            <div class="k-txt1">买家历史：</div>
            <div
              v-for="item in historyPriceData.personPrice"
              :key="item"
              class="k-txt2"
              @click="setPrice(item)"
            >
              {{ item }}
            </div>
            <div class="k-txt5">
              合计：<span>{{ totalPrice }}</span
              >元
            </div>
          </div>
          <!-- <div class="keyboard-next">清空</div> -->
          <div class="keyboard-next">下一项</div>
          <div class="keyboard-confirm">确定</div>
          <div class="null-3"></div>
          <div class="keyboard-child-box">
            <div @click="setVal(7)" class="keyboard-child">7</div>
            <div @click="setVal(8)" class="keyboard-child">8</div>
            <div @click="setVal(9)" class="keyboard-child">9</div>
            <div @click="setVal('+')" class="keyboard-child-small">
              <!-- + -->
              <img src="../assets/img/k1.png" alt="" />
            </div>
            <div @click="setVal(4)" class="keyboard-child">4</div>
            <div @click="setVal(5)" class="keyboard-child">5</div>
            <div @click="setVal(6)" class="keyboard-child">6</div>
            <div @click="setVal('-')" class="keyboard-child-small">
              <!-- - -->
              <img src="../assets/img/k2.png" alt="" />
            </div>
            <div @click="setVal(1)" class="keyboard-child">1</div>
            <div @click="setVal(2)" class="keyboard-child">2</div>
            <div @click="setVal(3)" class="keyboard-child">3</div>
            <div @click="setVal('*')" class="keyboard-child-small">
              <!-- x -->
              <img src="../assets/img/k3.png" alt="" />
            </div>
            <div @click="setVal(0)" class="keyboard-child">0</div>
            <div @click="setVal('.')" class="keyboard-child">.</div>
            <div @click="del" class="keyboard-child">
              <img class="del-icon" src="../assets/img/k5.png" alt="" />
            </div>
            <div @click="setVal('/')" class="keyboard-child-small">
              <!-- ➗ -->
              <img src="../assets/img/k4.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="money-box">
      <!-- 批量下单 -->
      <div class="order-box">
        <img
          @click="importPeople = !importPeople"
          src="../assets/img/add.png"
          class="add-icon"
          alt=""
        />
        <!-- 购物车（用户列表） -->
        <div class="peo-box">
          <div
            class="add-icon-peo"
            :style="
              maijiaId == item.maijia_id && carId == item.id ? 'background-color: #4BC983;color: #fff' : ''
            "
            @click="choosePeople(item, index)"
            v-for="(item, index) in buyCarList"
            :key="index"
          >
            {{ item.name }}
            <span>{{ item.sort ? "(" + item.sort + ")" : "" }}</span>
            <div
              style="
                min-width: 20px;
                margin: -10px 0 0 0;
                color: #fff;
                display: inline-block;
                background: red;
              "
              v-if="item.car_num"
            >
              {{ item.car_num }}
            </div>
            <!-- {{ item.maijia_id }} -->
            <!-- {{ maijiaId }} -->
            <!-- {{ item.car_num }} -->
          </div>
        </div>
        <!-- :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }" -->
        <!-- <a-avatar-group :max-count="9">
        </a-avatar-group> -->
        <!-- <a-avatar :style="peopleIndex == index ? 'width: 52px;height:52px;background-color: #6AB269' : 'width: 52px;height:52px;'" @click="choosePeople(item, index)" v-for="(item, index) in 999" :key="index">张三{{ index }}号</a-avatar> -->
        <!-- <a-button class="order" type="primary"> 批量下单 </a-button> -->
      </div>
      <div v-if="dataCar.length > 0" class="table-box">
        <a-table
          :emptyText="'暂无数据'"
          style="font-size: 22px"
          :dataSource="dataCar"
          :columns="columns"
        >
          <template v-if="column.key === 'del'"> </template>
        </a-table>
      </div>
      <div class="order-box-bottom">
        <a-button class="order" style="float: left" type="dashed"> 挂单 </a-button>
        <a-button
          @click="toFormatData"
          class="order"
          style="float: left; margin-left: 20px"
          type="dashed"
        >
          批量下单
        </a-button>
        <a-button class="order" type="primary"> 合计：¥{{ totalPrice }} 结算</a-button>
        <!-- <a-button class="order" type="primary"> 合计：¥21.00 结算</a-button> -->
      </div>
    </div>
    <a-drawer
      width="73%"
      v-model:open="importPeople"
      placement="right"
      @after-open-change="afterOpenChange"
    >
      <template #title>
        <!-- <div style="font-size: 22px">导入买家</div> -->
      </template>
      <template #closeIcon>
        <img @click="importPeople = false" class="s-btn" src="../assets/img/bb.png" alt="" />
      </template>
      <div class="draw-lat-box">
        <input
          v-model="peopleKeywords"
          type="text"
          placeholder="请输入买家名称"
          class="draw-input"
        />
        <div @click="searchPeople(peopleKeywords)" class="draw-input-btn">搜索</div>
        <!-- <a-input-search
          v-model:value="value"
          placeholder="请输入买家名称"
          style="width: 285px;"
          size="large"
          class="draw-input"
          @search="onSearch"
        /> -->
        <div class="draw-lat">
          <div
            @click="searchPeople(item)"
            class="child"
            v-for="item in peopleListData.name_letters"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="draw-main">
        <div
          @click="addBuy(item)"
          class="people"
          v-for="item in peopleListData.memberInfo"
          :key="item"
        >
          <a-avatar
            size="large"
            :src="!item.headimgurl ? avtor : item.headimgurl"
            :style="{
              marginLeft: '20px',
              backgroundColor: '#4fb65d',
              verticalAlign: 'middle',
              width: '80px',
              height: '80px',
              lineHeight: '80px',
              fontSize: '26px',
            }"
            :gap="gap"
          >
            <!-- {{ item.nickname }} -->
          </a-avatar>
          <div class="singe-line" style="width: 100px; margin-left: 20px">
            {{ item.nickname }}
          </div>
        </div>
      </div>
    </a-drawer>
    <a-drawer
      width="80%"
      v-model:open="orderDrawer"
      placement="right"
      @after-open-change="afterOpenChange"
    >
      <!-- <template #title>
        <div style="font-size: 22px">批量下单</div>
      </template> -->
      <template #closeIcon>
        <img @click="orderDrawer = false" class="s-btn" src="../assets/img/bb.png" alt="" />
      </template>
      <div class="start-box">
        <a-textarea
          v-model:value="content"
          style="
            border: none;
            outline: none;
            padding: 30px;
            font-size: 20px;
            height: 100%;
          "
          placeholder="请输入下单内容"
        />
      </div>
      <div class="mid-box">
        <a-button :disabled="!content" @click="toFormat" size="large" type="primary">
          =>
        </a-button>
      </div>
      <div class="end-box">
        <a-table
          emptyText="暂无数据"
          style="font-size: 22px"
          :dataSource="_dataSource"
          :columns="_columns"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'del'">
              <a-button @click="onDelete(record)" type="primary">删除</a-button>
            </template>
          </template>
        </a-table>
      </div>
      <template #footer>
        <div style="padding-top: 10px">
          <a-button @click="makeOrder(_dataSource)" class="order ml-20" type="primary"> 确定下单 </a-button>
          <a-button @click="_dataSource = []" class="order ml-20" type="dashed"> 清空列表 </a-button>
          <a-button @click="content = ''" class="order ml-20" type="dashed"> 清空下单内容 </a-button>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script setup>
import {
  nextTick,
  onMounted,
  reactive,
  ref,
  toRaw,
  watch,
} from 'vue';

import {
  message,
  Modal,
} from 'ant-design-vue';
import * as echarts from 'echarts';
import {
  debounce,
  throttle,
} from 'lodash';

import {
  addmj,
  addmjPeople,
  categoryList,
  formatData,
  getDataCar,
  getMaijiaCar,
  goodsList,
  historyPrice,
  searcheShouyinMember,
} from '@/api/data';

import avtor from '../assets/img/normal_people.png';

const changeType = (index) => {
  typeIndex.value = index;
  goodsList({
      catid: typeIndex.value == -1 ? '' : categoryListData.data[typeIndex.value].id,
    key: goodsListParam.key,
    ishuozhuorfenlei: categoryListParam.ishuozhuorfenlei,
  })
    .then((res) => {
      console.log(res);
      const { data } = res;
      goodsListData.data = data.data;
      goodData.value = null;
    })
    .catch((err) => {
      console.log(err);
    });  
}
const keyDown = (e)=>{
   if (e.keyCode == 13 ) //回车键是13 
   { 
    goodsList({
      catid: typeIndex.value == -1 ? '' : categoryListData.data[typeIndex.value].id,
    key: goodsListParam.key,
    ishuozhuorfenlei: categoryListParam.ishuozhuorfenlei,
  })
    .then((res) => {
      console.log(res);
      const { data } = res;
      goodsListData.data = data.data;
      goodData.value = null;
    })
    .catch((err) => {
      console.log(err);
    });        
   } 
 }

// 批量格式化
const _dataSource = ref([]);
const _columns = [
  {
    title: "商品名称",
    dataIndex: "goods_name",
    key: "goods_name",
  },
  {
    title: "数量/重量",
    dataIndex: "num",
    key: "num",
  },
  {
    title: "操作",
    key: "del",
  },
];
const content = ref(null);
const toFormat = () => {
  formatData({
    bitchItems: content.value,
    maijia_id: maijiaId.value,
  })
    .then((res) => {
      console.log(res);
      _dataSource.value = res;
    })
    .catch((err) => {
      console.log(err);
    });
};
// 删除
const onDelete = (res) => {
  _dataSource.value = _dataSource.value.filter((item) => {
    return item.goods_id != res.goods_id;
  });
  console.log(res.goods_id);
};
const toFormatData = () => {
  if (maijiaId.value) {
    orderDrawer.value = !orderDrawer.value;
  } else {
    message.error("请选择买家");
  }
};
const buyCarList = ref([]);
const dataCar = ref([]);
// 获取商品表格列表
const getDataCarFn = (car_id) => {
  getDataCar({
    maijia_id: maijiaId.value,
    car_id,
  })
    .then((res) => {
      console.log(res);
      dataCar.value = res.data;
      totalPrice.value = res.total;
    })
    .catch((err) => {
      console.log(err);
    });
};
// 获取购物车列表
const getBuyCar = (flag) => {
  getMaijiaCar()
    .then((res) => {
      console.log(res);
      buyCarList.value = res.data;
      if (flag) {
        carId.value = res.data[0]['id'];
        maijiaId.value = res.data[0]['maijia_id']
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const maijiaId = ref(null);
const findMj = () => {
  const name = (buyCarList.value.filter((item)=>{ return item.maijia_id == maijiaId.value }))[0]['name']
  return name;
}
// 添加买家
const addBuy = (item) => {
  maijiaId.value = item.id;
  const data = {
    maijia_id: item.id,
    name: item.name,
  };
  addmj(data)
    .then((res) => {
      console.log(res);
      getBuyCar(true);
      importPeople.value = false;
    })
    .catch((err) => {
      console.log(err);
    });
};
const peopleKeywords = ref("");
// 商品列表
const columns = [
  {
    title: "货品",
    dataIndex: "goods_name",
    key: "goods_name",
  },
  {
    title: "数量",
    dataIndex: "num",
    key: "num",
  },
  {
    title: "单价",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "货款",
    dataIndex: "goods_price",
    key: "goods_price",
  },
  {
    title: "操作",
    key: "del",
  },
];
const orderDrawer = ref(false);
const goodLarge = ref(true);
const importPeople = ref(false);
const isMobileOrTablet = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // 判断是否是iPad
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return true; // 是iPad
  }
  // 判断是否是安卓或者苹果手机
  return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
};
const readonly = ref(isMobileOrTablet());
const typeIndex = ref(-1);
// 左侧分类
const categoryListParam = reactive({
  page: 1,
  limit: 1000,
  ishuozhuorfenlei: 1, // 1分类 2货主
});
const categoryListData = reactive({
  data: [],
  last_page: 0,
});
// 商品
const goodsListParam = reactive({
  ishuozhuorfenlei: categoryListParam.ishuozhuorfenlei, // 1分类 2货主
  key: "",
});
const goodsListData = reactive({
  data: null,
});
const changeListType = () => {
  categoryListParam.ishuozhuorfenlei = categoryListParam.ishuozhuorfenlei == 1 ? 2 : 1;
  typeIndex.value = -1;
  categoryList(toRaw(categoryListParam))
    .then((res) => {
      console.log(res);
      const { data } = res;
      categoryListData.data = data;
    })
    .catch((err) => {
      console.log(err);
    });
};
// 查找商品
const searchGood = (item) => {
  goodsList({
    key: item,
    ishuozhuorfenlei: categoryListParam.ishuozhuorfenlei,
  })
    .then((res) => {
      console.log(res);
      const { data } = res;
      goodsListData.data = data.data;
      typeIndex.value = -1;
      goodData.value = null;
    })
    .catch((err) => {
      console.log(err);
    });
};
const goodPrice = ref("0.00"); //货款
const totalPrice = ref("0.00"); // 合计
const lzPrice = ref("5"); // 力资
const lzTotalPrice = ref("0"); // 力资合计
const lzType = ref("add"); // add买家出 sub货主出
const changeLzType = () => {
  lzType.value = lzType.value == "add" ? "sub" : "add";
  calcTotalPrice();
};
const ticketPrice = ref("2"); // 开票
const ticketTotalPrice = ref("0"); // 开票合计
const ticketType = ref("add"); // add买家出 sub货主出
const changeTicketType = () => {
  ticketType.value = ticketType.value == "add" ? "sub" : "add";
  calcTotalPrice();
};
// 计算货款 合计
// const calcTotalPrice = () => {
//   if (numField.value && unitField.value) {
//     goodPrice.value = (numField.value * unitField.value).toFixed(2);
//     let price = ((numField.value * unitField.value));
//     if (lzType.value == 'add') {
//       price += Number(lzTotalPrice.value);
//     }
//     if (lzType.value == 'sub') {
//       price -= Number(lzTotalPrice.value);
//     }
//     if (ticketType.value == 'add') {
//       price += Number(ticketTotalPrice.value);
//     }
//     if (ticketType.value == 'sub') {
//       price -= Number(ticketTotalPrice.value);
//     }
//     totalPrice.value = price.toFixed(2);
//   }
// }
const calcTotalPrice = () => {
  if (numField.value && unitField.value) {
    let _goodPrice = numField.value * unitField.value;
    let price = numField.value * unitField.value;
    if (lzType.value == "add") {
      price += Number(lzTotalPrice.value);
    }
    if (lzType.value == "sub") {
      _goodPrice -= Number(lzTotalPrice.value);
      goodPrice.value = _goodPrice.toFixed(2);
    }
    if (ticketType.value == "add") {
      price += Number(ticketTotalPrice.value);
    }
    if (ticketType.value == "sub") {
      _goodPrice -= Number(ticketTotalPrice.value);
      goodPrice.value = _goodPrice.toFixed(2);
    }
    goodPrice.value = _goodPrice.toFixed(2);
    totalPrice.value = price.toFixed(2);
  }
};
const buyUnitIndex = ref(1);
const regexFormula = /^(\d+|\d+[.]?\d+)([+\-*/](\d+|\d+[.]?\d+))+$/;
const regexNumber = /^[-]?(\d+|\d+[.]?\d+)$/;
const regexIeger = /^\d+$/;
const isShowCalcData = (str) => {
  return (
    regexFormula.test(str) &&
    !regexNumber.test(str) &&
    !regexIeger.test(str) &&
    !isNaN(window.eval(str))
  );
};
const isHave = (str) => {
  str += "";
  const arr = ["+", "-", "*", "/"];
  const bool = arr.filter((item) => {
    return str.includes(item);
  });
  console.log("666" + Boolean(bool.length));
  return Boolean(bool.length);
};
const calcNum = (str) => {
  return window.eval(str);
};
const letterList = ref([]);
for (let i = 65; i < 65 + 26; i++) {
  const letter = String.fromCharCode(i);
  letterList.value.push(letter);
}
// 选择商品
const historyPriceData = ref({
  allPrice: [],
  personPrice: [],
});
const goodIndex = ref(-1);
const goodData = ref(null);
const buyUnitItem = ref(null);
// 选择商品
const chooseGood = (index, data = null) => {
  goodIndex.value = index;
  if (index == -1){
    goodData.value = null;
    return;
  }
  // data.maijia_id = 99999;
  goodData.value = data;
  buyUnitItem.value = data.sell_type;
  if (data.goodsFujiafei.length > 0) {
    // lzType.value = data.goodsFujiafei[0]["type_name"] == "买家出" ? "add" : "sub";
    // ticketType.value = data.goodsFujiafei[1]["type_name"] == "买家出" ? "add" : "sub";
    // lzPrice.value = data.goodsFujiafei[0]["rate"];
    // ticketPrice.value = data.goodsFujiafei[1]["rate"];
  }
  historyPrice({
    goodsid: data.goods_id,
    maijia_id: !maijiaId.value ? 99999 : maijiaId.value,
  })
    .then((res) => {
      historyPriceData.value = res;
    })
    .catch((err) => {
      console.log(err);
    });
};
const peopleListData = ref([]);
// 搜索买家
const searchPeople = (keywords = "") => {
  searcheShouyinMember({
    keywords,
  })
    .then((res) => {
      console.log(res);
      peopleListData.value = res;
      if (res.memberInfo.length == 0) {
        Modal.confirm({
          title: '提示',
          content: '确定新建买家：' + keywords + '吗?',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            addmjPeople({ name: keywords })
          .then((res) => {
            maijiaId.value = res;
            const data = {
              maijia_id: res,
              name: keywords,
            };
            addmj(data)
              .then((res) => {
                console.log(res);
                getBuyCar(true);
                importPeople.value = false;
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
          },
          onCancel() {
          },
        });
        
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const num = ref("");
const numField = ref("");
const unit = ref("");
const unitField = ref("");
const inpIndex = ref(-1);
let timer = null;
let txt = null;
// 全部历史 买家历史
const setPrice = (val) => {
  unit.value = val;
  unitField.value = val;
  ticketTotalPrice.value = ticketPrice.value;
};
const chooseInp = (index) => {
  inpIndex.value = index;
  timer ? clearTimeout(timer) : "";
  if (inpIndex.value < 2) {
    timer = setTimeout(() => {
      var input = document.getElementById("num-inp" + index);
      if (input.innerText) {
        txt = [num.value, unit.value][inpIndex.value];
        if (inpIndex.value == 0) {
          num.value = "";
          input.focus();
          num.value = txt;
        }
        if (inpIndex.value == 1) {
          unit.value = "";
          input.focus();
          unit.value = txt;
        }
      } else {
        input.focus();
      }
    }, 100);
  }
};
onMounted(() => {
  searchPeople();
  getBuyCar(false);
  categoryList(toRaw(categoryListParam))
    .then((res) => {
      console.log(res);
      const { data, last_page } = res;
      categoryListData.data = data;
      categoryListData.last_page = last_page;
      goodsList(toRaw(goodsListParam))
        .then((res) => {
          console.log(res);
          const { data } = res;
          goodsListData.data = data.data;
          // categoryListData.last_page = last_page;
        })
        .catch((err) => {
          console.log(err);
        });
    })
    .catch((err) => {
      console.log(err);
    });
});
const setVal = (val) => {
  if (inpIndex.value < 0) return false;
  switch (inpIndex.value) {
    case 0:
      const str = num.value + (val + "");
      // typeof val == "number" ? (num.value += (val + '')) : "";
      timer = setTimeout(() => {
        var input = document.getElementById("num-inp" + inpIndex.value);
        num.value = "";
        num.value = str;
        input.focus();
      }, 10);
      break;
    case 1:
      const _str = unit.value + (val + "");
      // typeof val == "number" ? (unit.value += val+'') : "";
      // unit.value += (val + '')
      timer = setTimeout(() => {
        var input = document.getElementById("num-inp" + inpIndex.value);
        unit.value = "";
        unit.value = _str;
        input.focus();
      }, 10);
      break;

    default:
      break;
  }
};
const del = () => {
  switch (inpIndex.value) {
    case 0:
      const str = num.value.slice(0, -1);
      timer = setTimeout(() => {
        var input = document.getElementById("num-inp" + inpIndex.value);
        num.value = "";
        num.value = str;
        input.focus();
      }, 10);
      break;
    case 1:
      unit.value = unit.value.slice(0, -1);
      break;

    default:
      break;
  }
};
// 力资
watch(lzPrice, (newValue, oldValue) => {
  // lzTotalPrice.value = (numField.value * newValue).toFixed(2)
  lzTotalPrice.value = numField.value * newValue;
  ticketTotalPrice.value = ticketPrice.value;
  calcTotalPrice();
});
// 数量
// const numChange = () =>{
//   const isCalc = isShowCalcData(num.value);
//   if (isHave(num.value)) {
//     isCalc ? numField.value = window.eval(num.value) : '';
//   } else {
//     numField.value = num.value;
//   }
// }
watch(num, (newValue, oldValue) => {
  const isCalc = isShowCalcData(newValue);
  if (isHave(newValue)) {
    isCalc ? (numField.value = window.eval(newValue)) : "";
  } else {
    numField.value = newValue;
  }
  // lzTotalPrice.value = (numField.value * lzPrice.value).toFixed(2);
  lzTotalPrice.value = numField.value * lzPrice.value;
  ticketTotalPrice.value = ticketPrice.value;
  console.log(unitField.value);
  calcTotalPrice();
});
// 单价
// const unitChange = () =>{
//   const isCalc = isShowCalcData(unit.value);
//   if (isHave(unit.value)) {
//     isCalc ? unitField.value = window.eval(unit.value) : '';
//   } else {
//     unitField.value = unit.value;
//   }
// }
watch(unit, (newValue, oldValue) => {
  const isCalc = isShowCalcData(newValue);
  if (isHave(newValue)) {
    isCalc ? (unitField.value = window.eval(newValue)) : "";
  } else {
    unitField.value = newValue;
  }
  // lzTotalPrice.value = (numField.value * lzPrice.value).toFixed(2);
  lzTotalPrice.value = numField.value * lzPrice.value;
  ticketTotalPrice.value = ticketPrice.value;
  console.log(numField.value);
  calcTotalPrice();
});
const peopleIndex = ref(-1);
const carId = ref(null);
// 点击 购物车列表 获取下面表格数据
const choosePeople = (item, index) => {
  maijiaId.value = item.maijia_id;
  carId.value = item.id;
  getDataCarFn(item.id);
  // peopleIndex.value = index;
  // alert(item);
};
// 下单
const makeOrder = (arr) => {
  console.log(arr)
  return false;
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].mate == 1) {
                    let item = arr[i].goods_info
                    this.editInfo = []
                    this.editInfo = item;
                    this.editInfo.editWeightData = "";
                    this.input_weight = "";
                    this.editInfo.editNumData = "";
                    this.input_num = "";

                    if (item.sell_type == "公斤" || item.sell_type == "斤") {
                        this.editInfo.editWeightData = arr[i].num;
                        this.input_weight = arr[i].num;
                    } else {
                        this.editInfo.editNumData = arr[i].num;
                        this.input_num = arr[i].num;
                    }
                    this.editInfo.car_id = '';
                    this.editInfo.show_unit = item.sell_type;
                    this.editInfo.editPriceData = arr[i].price;


                    this.car_type_click = 0;

                    this.input_price = arr[i].price;

                    this.order_id = "";
                    this.kaidanheji = 0;
                    this.huokuan = 0;
                    this.car_type_click = 0;
                    this.editInfo.editUsername = this.chooseMaijiaInfo.name ? this.chooseMaijiaInfo.name : '临时买家';
                    this.editInfo.editUsernameId = this.chooseMaijiaInfo.id ? this.chooseMaijiaInfo.id : '';;
                    this.chooseInputIndex = 1;
                    this.guige_list = item.goods_guige;
                    this.chooseGuigeIndex = item.sell_type;
                    this.fujiafei_list = item.goods_fujiafei;

                    this.changeUnit()
                    this.huokuanTotal()
                    this.handelKaidanDataCar()
                    this.batchOrderShow = false


                    // this.handelKaidanDataCar()
                }

            }
}
</script>

<style scoped lang="scss">
.list-box {
  width: 223px;
  height: 100%;
  float: left;
}
.list {
  width: 100%;
  height: calc(100% - 84px);
  overflow-y: auto;
  float: left;
}
.child-active {
  background: #4fb65d !important;
  color: #fff !important;
  div {
    color: #fff !important;
  }
}
.draw-lat-box {
  margin: 0 auto;
  width: calc(100% - 50px);
  height: 60px;
}
.draw-input {
  width: 285px;
  height: 60px;
  float: left;
  margin-right: 25px;
  border-radius: 15px;
  padding: 15px;
  border: 1px solid #4fb65d;
  outline: none;
}
.draw-input-btn {
  width: 150px;
  height: 60px;
  line-height: 30px;
  float: left;
  margin-right: 25px;
  border-radius: 15px;
  text-align: center;
  padding: 15px;
  background: #4fb65d;
  outline: none;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.draw-lat {
  width: calc(100% - 310px - 150px - 25px);
  overflow-x: auto;
  height: 60px;
  border-radius: 15px;
  float: left;
  // padding: 0 25px 0 25px;
  box-shadow: 0px 1px 40px 1px rgba(21, 34, 50, 0.08);
  margin-bottom: 25px;
  white-space: nowrap;
  .child {
    width: 75px;
    height: 60px;
    font-size: 24px;
    // font-size: 28px;
    color: #040415;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    // display: inline-block;
    border-radius: 0 !important;
    float: left;
    font-weight: bold;
    margin: 0 !important;
  }
  .child:active {
    background: #4fb65d;
    color: #fff;
  }
}
.draw-main {
  width: 100%;
  height: calc(100% - 100px);
  overflow-y: auto;
  // padding: 0 25px 25px 25px;
  padding: 25px 25px 25px 25px;
  // display: flex;
  // justify-content: space-between;
}
.people {
  cursor: pointer;
  color: #4fb65d;
  font-size: 24px;
  font-weight: bold;
  width: 238px;
  height: 130px;
  padding: 5px;
  margin-right: 25px;
  background: #fff;
  box-shadow: 0px 1px 40px 1px rgba(21, 34, 50, 0.08);
  border-radius: 15px;
  margin-bottom: 25px;
  display: flex;
  // justify-content: center;
  // align-content: center;
  align-items: center;
  float: left;
}
// .people:nth-child(7n) {
//   margin-right: 0;
// }
.people:nth-child(5n) {
  margin-right: 0;
}
.child {
  cursor: pointer;
  border-radius: 24px 24px 24px 24px;
  width: 223px;
  height: 84px;
  background: #fff;
  padding: 20px;
  margin-bottom: 17px;
  box-sizing: border-box;
  position: relative;
  .icon {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 20px;
    top: 24px;
  }
  .title {
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: left;
    font-size: 24px;
    color: #040415;
  }
  .desc {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: left;
    font-size: 16px;
    color: #040415;
  }
}
.large {
  font-size: 23px;
  line-height: 44px;
  text-align: left;
}
.goods {
  width: 490px;
  height: 100%;
  margin-left: 25px;
  float: left;
}
.input {
  width: 456px;
  height: 50px;
  float: left;
  position: relative;
  clear: both;
  margin-bottom: 13px;
  .icon {
    width: 36px;
    height: 36px;
    position: absolute;
    top: -2px;
    right: 0 !important;
    font-size: 19px !important;
    color: #4fb65d !important;
    // text-align: center;
    // line-height: 36px !important;
    cursor: pointer;
  }
  input {
    outline: none;
    width: 354px;
    height: 50px;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    left: 28px;
    top: 0;
    z-index: 2;
    border: none;
    color: #121a2d;
    font-size: 24px;
  }
  .img {
    width: 420px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
}
.good-list {
  clear: both;
  width: 100%;
  height: calc(100% - 50px - 13px);
  overflow-y: auto;
}
.good {
  width: 214px;
  height: 232px;
  border-radius: 20px;
  float: left;
  margin: 0 25px 25px 0;
  background: #fff;
  padding: 8px 10px 8px 10px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #fff;
  .g-img {
    width: 195px;
    height: 110px;
    border-radius: 20px 20px 20px 20px;
    background: #c2f9d9;
    line-height: 110px;
    text-align: center;
    color: #121a2d;
    font-size: 26px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    img {
      width: 195px;
      height: 110px;
      position: absolute;
      left: 0;
      top: 0;
      object-fit: cover;
    }
  }
  .g-title {
    width: 100%;
    height: 37px;
    font-size: 26px;
    color: #121a2d;
    font-weight: bold;
    margin-top: 2px;
    text-align: left !important;
  }
  .g-desc {
    clear: both;
    min-width: 32px;
    display: inline-block;
    padding: 0 6px 0 6px;
    height: 26px;
    font-weight: bold;
    line-height: 26px;
    border-radius: 8px;
    color: #089bab;
    background: #ceebee;
    font-size: 15px;
    float: left;
    margin-top: 2px;
    text-align: left !important;
  }
  .g-unit {
    clear: both;
    display: inline-block;
    min-width: 28px;
    height: 20px;
    padding: 0 6px 0 6px;
    line-height: 20px;
    border: 1px solid #6ab269;
    border-radius: 5px;
    color: #6ab269;
    font-weight: bold;
    font-size: 12px;
    float: left;
    margin-top: 6px;
    text-align: left !important;
  }
}
.good-small {
  width: 214px;
  height: 110px;
  padding: 6px 10px 6px 10px;
  border-radius: 20px;
  float: left;
  font-size: 20px;
  margin: 0 25px 25px 0;
  background: #fff;
  padding: 8px 10px 8px 10px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #fff;
  .txt-row {
    float: left;
    text-align: left;
    width: calc(100% - 68px - 10px);
  }
  .g-img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    float: left;
    margin-right: 10px;
    border-radius: 10px;
  }
  ._g-title1 {
    width: 110px;
    height: 28px;
    color: #121a2d;
    font-size: 20px !important;
    font-weight: bold;
    float: left;
    text-align: left !important;
  }
  ._g_desc {
    clear: both;
    min-width: 32px;
    padding: 0 6px 0 6px;
    height: 17px;
    line-height: 17px;
    background: #ff5733;
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    float: left;
    font-size: 9px !important;
    font-weight: bold;
    // margin: 2px 0 -3px 0;
    margin: 2px 0 0 0;
  }
  ._g-unit {
    border: 1px solid #ffc992;
    clear: both;
    display: inline-block;
    min-width: 28px;
    height: 15px;
    color: #ffc992;
    border-radius: 5px;
    line-height: 15px;
    padding: 0 4px 0 4px;
    font-size: 9px !important;
    margin-right: 6px;
  }
  ._g-unit2 {
    border: 1px solid #9ac3f2;
    clear: both;
    border-radius: 5px;
    color: #9ac3f2;
    display: inline-block;
    min-width: 28px;
    height: 15px;
    line-height: 15px;
    font-size: 9px !important;
    padding: 0 4px 0 4px;
  }
  ._g-title {
    color: #121a2d;
    font-size: 14px !important;
    width: 100%;
    height: 20px;
    line-height: 20px;
    clear: both;
    float: left;
    margin-top: 4px !important;
    font-weight: bold;
    text-align: left !important;
  }
}

// .lat {
//   width: 57px;
//   height: 100%;
//   background: #fff;
//   float: left;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   margin-left: -10px;
//   overflow-y: auto;
//   div {
//     font-size: 20px;
//     color: #000;
//     font-weight: bold;
//     flex: 1;
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     text-align: center;
//     cursor: pointer;
//   }
// }

.lat {
  width: 57px;
  height: 100%;
  background: #fff;
  float: left;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  margin-left: -10px;
  overflow-y: auto;
  div {
    font-size: 20px;
    color: #000;
    font-weight: bold;
    // flex: 1;
    width: 57px;
    height: 57px;
    // background: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
  div:active {
    background: #00bf58;
    color: #fff;
  }
}
.money-box {
  // width: 950px;
  width: 972px;
  height: 100%;
  padding: 26px 55px 26px 55px;
  // padding: 15px 30px 15px 30px;
  float: right;
  background: #fff;
  position: relative;
}
.s-btn {
  width: 55px;
  height: 55px;
  float: left;
  cursor: pointer;
  z-index: 9;
  &:active {
    opacity: 0.8;
  }
}
.txt {
  // width: 225px;
  width: 240px;
  padding: 0 15px 0 15px;
  float: left;
  height: 72px;
  border-radius: 0px 0px 20px 20px;
  background: #6ab269;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  margin: -26px 0 0 49px;
  // margin: -15px 0 0 49px;
}
.null {
  width: 100%;
  height: 24px;
  clear: both;
}
.null-3 {
  width: 100%;
  height: 3px;
}
.t-group {
  // min-width: 156px;
  min-width: 78px;
  height: 46px;
  float: right;
  border-radius: 10px;
  border: 1px solid #6ab269;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  .tg-btn {
    flex: 1;
    width: 78px;
    line-height: 46px;
    color: #6ab269;
    // border-radius: 10px;
    text-align: center;
    background: none;
    font-size: 16px;
    border-right: 1px solid #6ab269;
    &:last-child{
      border-right: none;
    }
  }
  .tg-active {
    background: #6ab269 !important;
    color: #fff;
  }
}
.inp-box {
  width: 100%;
  height: 254px;
  padding-top: 36px;
  clear: both;
}
.inp1-active {
  border: 2px solid #2a9128 !important;
}
.inp1 {
  width: 225px;
  height: 112px;
  cursor: pointer;
  border-radius: 20px 20px 20px 20px;
  border: 1px solid #6ab269;
  // border: 1px solid rgba(106, 178, 105, .9);
  padding: 15px;
  position: relative;
  text-align: left;
  margin-right: 30px;
  margin-bottom: 30px;
  float: left;
  .input {
    // width: 100px;
    width: 100%;
    height: 28px;
    font-size: 20px;
    color: #131523;
    outline: none;
    border: none;
    float: left;
  }
  .unit {
    width: 100px;
    height: 28px;
    font-size: 20px;
    text-align: left;
    color: #6ab269;
    position: absolute;
    right: 15px;
    bottom: 15px;
    text-align: right;
  }
  .inp1-icon-box {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    background: #daf9ec;
    text-align: center;
    cursor: pointer;
    .inp1-icon {
      width: 13.3px;
      height: 13.3px;
      margin: 9px 0 -6px 0;
    }
    .inp1-txt {
      width: 100%;
      height: 17px;
      line-height: 17px;
      text-align: center;
      font-size: 12px;
      color: #06a561;
    }
  }
  .inp1-icon-box2 {
    width: 80px;
    height: 31px;
    // background: #98a5ad;
    background: #00bf58;
    position: absolute;
    right: 15px;
    // bottom: 15px;
    bottom: 21px;
    font-size: 16px;
    line-height: 31px;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    img {
      width: 20px;
      height: 16px;
      object-fit: cover;
      float: left;
      margin: 7px 1px 0 5px;
    }
  }
  .price {
    // width: calc(100% - 100px);
    width: calc(100% - 110px);
    height: 42px;
    font-size: 30px;
    color: #f16b6b;
    line-height: 42px;
    text-align: left;
    position: absolute;
    font-weight: bold;
    left: 15px;
    bottom: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    span {
      margin-left: -6px;
    }
  }
}
.keyboard-box {
  clear: both;
  width: 100%;
  // width: 831px;
  // height: 482px;
  // height: 502px;
  height: 512px;
  border-radius: 29px 29px 29px 29px;
  background: #edf7f3;
  padding: 35px 20px 35px 20px;
  position: relative;
  // margin-top: 54px;
}
.k-txt {
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-weight: bold;
  color: #25265e;
  margin-bottom: 23px;
  // margin-bottom: 12px;
  .k-txt1 {
    height: 28px;
    line-height: 28px;
    color: #25265e;
    float: left;
    font-size: 20px;
  }
  .k-txt2 {
    min-width: 38px;
    height: 26px;
    line-height: 26px;
    padding: 0 16px 0 16px;
    border-radius: 13px;
    border: 1px solid #6ab269;
    color: #6ab269;
    font-size: 19px;
    text-align: center;
    float: left;
    margin: 1px 0 0 0px;
  }
}
.k-txt4 {
  text-align: right;
  min-width: 60px;
  height: 20px;
  line-height: 26px;
  // padding: 0 16px 0 16px;
  padding: 0 0 0 16px;
  font-size: 20px;
  text-align: center;
  float: right;
  span {
    color: #f16b6b;
    margin-left: 23px;
  }
}
.k-txt5 {
  min-width: 60px;
  text-align: right;
  height: 26px;
  line-height: 26px;
  // padding: 0 16px 0 16px;
  padding: 0 0 0 16px;
  font-size: 26px;
  text-align: center;
  float: right;
  span {
    color: #f16b6b;
  }
}
.keyboard-child-box {
  // width: 586px;
  width: 599px;
  // width: 610px;
}
.keyboard-child {
  cursor: pointer;
  width: 149px;
  height: 76px;
  line-height: 76px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
  margin: 0 13px 13px 0;
  float: left;
  font-size: 48px;
  font-weight: bold;
  color: #131523;
}
.keyboard-child:active {
  background: #00bf58;
  color: #fff;
}
.keyboard-child-small {
  width: 100px;
  height: 76px;
  cursor: pointer;
  line-height: 76px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 0 0 13px 0;
  float: left;
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  color: #785dc8;
  img {
    width: 56px;
    height: 53px;
    margin-top: 12px;
  }
}
.keyboard-child-small:active {
  // opacity: .2;
  background: #00bf58;
  color: #fff;
}
.keyboard-next {
  width: 175px;
  // height: 165px;
  height: 110px;
  // line-height: 165px;
  line-height: 110px;
  background: #fe9d18;
  font-size: 41px;
  text-align: center;
  color: #fff;
  position: absolute;
  border-radius: 10px;
  right: 15px;
  bottom: 265px;
  cursor: pointer;
  &:active {
    opacity: 0.6;
  }
}
.keyboard-confirm {
  width: 175px;
  height: 220px;
  // height: 165px;
  border-radius: 10px;
  line-height: 165px;
  background: #00bf58;
  font-size: 41px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  position: absolute;
  right: 15px;
  bottom: 25px;
  &:active {
    opacity: 0.6;
  }
}
.del-icon {
  width: 72px;
  height: 51px;
  margin-top: 13px;
}
// .order-box{
//   width: 100%;
//   height: 60px;
//   line-height: 60px;
//   // display: flex;
//   // justify-content: center;
//   border-bottom: 1px dashed #979797;
// }
.order-box {
  width: 100%;
  height: 80px;
  line-height: 80px;
  // border-top: 1px dashed #979797;
  box-shadow: -1 0 8px rgba(0, 1, 1, 0.08);
  position: absolute;
  top: 0;
  left: 0;
  padding: 25px;
  overflow-x: hidden;
}
.table-box {
  width: 100%;
  height: calc(100% - 80px - 65px);
  position: absolute;
  top: 60px;
  left: 0;
  padding: 25px;
  // background: red;
}
.add-icon {
  width: 52px;
  height: 52px;
  line-height: 52px;
  float: left;
  margin-right: 15px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  &:active {
    opacity: 0.8;
  }
}
.peo-box {
  width: calc(100% - 67px);
  height: 80px;
  padding-right: 15px;
  margin-top: -22px;
  float: right;
  overflow-x: auto;
  white-space: nowrap;
  text-align: left;
  // background: red;
}
.add-icon-peo {
  // width: 52px;
  height: 52px;
  min-width: 130px !important;
  padding: 0 15px 0 15px;
  border-radius: 30px;
  line-height: 52px;
  margin-right: 15px;
  display: inline-block;
  box-shadow: 8px 8px 8px rgba(0, 1, 1, 0.08);
  // border-radius: 50%;
  background: #fff;
  font-size: 22px;
  font-weight: bold;
  // border: 1px solid #131523;
  text-align: center;
  cursor: pointer;
  &:active {
    opacity: 0.8;
  }
}
.order {
  min-width: 130px !important;
  padding: 0 20px 0 20px !important;
  border-radius: 30px;
  cursor: pointer;
  text-align: center !important;
  // height: 52px !important;
  height: 62px !important;
  float: right;
  // background: #6AB269;
  // color: #fff !important;
  // line-height: 52px;
  line-height: 62px;
  // padding: 0 !important;
  font-size: 22px !important;
  font-weight: bold;
  margin-top: -10px;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translateX(-50%) translateY(-50%);
}
.order-box-bottom {
  width: 100%;
  height: 90px;
  line-height: 90px;
  // border-top: 1px dashed #979797;
  box-shadow: 0 -1px 8px rgba(0, 1, 1, 0.08);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 25px;
}
.start-box {
  width: calc(50% - 30px);
  height: 100%;
  float: left;
  border: 1px solid rgba(5, 5, 5, 0.06);
  border-radius: 20px;
}
.mid-box {
  width: 60px;
  height: 100%;
  display: flex;
  background: biue;
  justify-content: center;
  float: left;
  align-items: center;
  font-size: 30px;
}
.end-box {
  width: calc(50% - 30px);
  height: 100%;
  float: left;
  border: 1px solid rgba(5, 5, 5, 0.06);
}
.ml-20 {
  margin-left: 20px;
}
</style>
